<template>
  <div>
    <div class="section" style="border:none;margin-top:20px">
      <div class="section-title">订单信息</div>
      <el-card>
        <div class="section-content">
          <div class="section-item">
            <div class="title">订单号</div>
            <div class="content" v-text="orderDetail.orderNum"></div>
          </div>
          <div class="section-item">
            <div class="title">创建时间:</div>
            <div class="content" v-text="orderDetail.createTime"></div>
          </div>
        </div>
        <div class="section-content">
          <div class="section-item">
            <div class="title">订单金额:</div>
            <div class="content" v-text="Number(orderDetail.freightMoney)/100"></div>
          </div>
          <div class="section-item" v-if="status == 1">
            <div class="title">订单失效时间:</div>
            <div class="content" v-text="deTime || '-'"></div>
          </div>
          <div class="section-item" v-if="status != 1">
            <div class="title">订单支付时间:</div>
            <div class="content" v-text="orderDetail.paymentTime || '-'"></div>
          </div>
        </div>
        <div class="section-content">
          <!-- <div class="section-item">
            <div class="title">钻石减免金额:</div>
            <div class="content" v-text="Number(orderDetail.damondNum)/50"></div>
          </div>-->
          <div class="section-item">
            <div class="title">用户微信昵称:</div>
            <div class="content" v-text="orderDetail.buyerNick"></div>
          </div>
        </div>
        <div class="section-content">
          <!-- <div class="section-item">
            <div class="title">返现金额:</div>
            <div class="content" v-text="Number(orderDetail.returnPrice)"></div>
          </div>-->
          <div class="section-item">
            <div class="title">用户微信手机:</div>
            <div class="content" v-text="orderDetail.receiverMobile"></div>
          </div>
        </div>
        <div class="section-content">
          <div class="section-item">
            <div class="title">快递费:</div>
            <div class="content" v-text="Number(orderDetail.freightMoney)/100"></div>
          </div>
          <div class="section-item">
            <div class="title">取消原因:</div>
            <div class="content" v-text="orderDetail.reason || '-'"></div>
          </div>
          <!-- <div class="section-item">
            <div class="title">上级代理:</div>
            <div class="content" v-text="orderDetail.parentName || '-'"></div>
          </div>-->
        </div>
        <div class="section-content">
          <div class="section-item" v-if="status == 1 || status == 2">
            <div class="title">须支付金额:</div>
            <div class="content" v-text="Number(orderDetail.actualPay)/100"></div>
          </div>
          <div class="section-item" v-else>
            <div class="title">支付金额:</div>
            <div class="content" v-text="Number(orderDetail.actualPay)/100"></div>
          </div>
          <div class="section-item">
            <div class="title">订单备注:</div>
            <div class="content" v-text="orderDetail.buyerMessage || '-'"></div>
          </div>
        </div>
      </el-card>
    </div>

    <div class="section">
      <div class="section-title">商品信息</div>
      <el-tabs v-model="activeName"  @tab-click="activeNameChange" v-if="status =='4'">
        <el-tab-pane label="交易信息" name="3">
          <el-table :data="tableData" empty-text=" " style="width: 100%">
            <el-table-column prop="title" label="商品名称"></el-table-column>
            <el-table-column prop="ownSpec" label="规格"></el-table-column>
            <!-- <el-table-column prop="ownSpec" label="类别"></el-table-column> -->

            <el-table-column prop="num" label="数量"></el-table-column>
            <el-table-column prop="productPrice" label="金额"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="订单分销" name="1">
          <el-table :data="tableData" empty-text=" " style="width: 100%">
            <el-table-column prop="spuTitle" label="商品名称"></el-table-column>
            <el-table-column prop="price" label="分销金额"></el-table-column>
            <el-table-column prop="mobile" label="上级代理电话"></el-table-column>
            <el-table-column prop="rebateTime" label="分销时间"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="订单返利" name="0">
          <el-table :data="tableData" empty-text=" " style="width: 100%">
            <el-table-column prop="spuTitle" label="商品名称"></el-table-column>
            <el-table-column prop="price" label="返利金额"></el-table-column>
            <el-table-column prop="mobile" label="上级电话"></el-table-column>
            <el-table-column prop="rebateTime" label="返利时间"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="商盟商品分销" name="2">
          <el-table :data="tableData" empty-text=" " style="width: 100%">
            <el-table-column prop="spuTitle" label="商品名称"></el-table-column>
            <el-table-column prop="price" label="分销金额"></el-table-column>
            <el-table-column prop="companyName" label="商品所属企业"></el-table-column>
            <el-table-column prop="rebateTime" label="分销时间"></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <div class="table-body" border style="margin:0" v-if="status !='4'">
        <el-table :data="tableData" empty-text=" " style="width: 100%">
          <el-table-column prop="title" label="商品名称"></el-table-column>
          <el-table-column prop="ownSpec" label="规格"></el-table-column>

          <el-table-column prop="num" label="数量"></el-table-column>
          <el-table-column prop="productPrice" label="金额"></el-table-column>
        </el-table>
      </div>
    </div>
    <div class="section" style="border:none">
      <div class="section-title">物流及收货信息</div>
      <div class="section-content" v-if="status != 10">
        <div class="section-item">
          <div class="title">收货地址:</div>
          <div class="content">
            <span style="margin-right:20px">{{orderDetail.receiver}}</span>
            <span style="margin-right:20px">{{orderDetail.receiverMobile}}</span>
            <span>{{orderDetail.receiverState+" " +orderDetail.receiverCity+" " +orderDetail.receiverDistrict+ " "+orderDetail.receiverAddress}}</span>
          </div>
        </div>
      </div>
      <div class="section-content" v-if="status != 1 || status != 2" style="margin-top:20px">
        <el-timeline>
          <el-timeline-item
            v-for="(item,index) in transformList"
            :key="index"
            :timestamp="item.AcceptTime"
            placement="top"
          >
            <el-card>
              <h4>{{item.AcceptStation}}</h4>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>

      <div class="section-content" v-if="status == 7" style="margin-top:20px">
        <el-timeline>
          <el-timeline-item :timestamp="orderDetail.returnCreateTime" placement="top">
            <el-card>
              <h4>退款发起，审核中</h4>
            </el-card>
          </el-timeline-item>
          <el-timeline-item
            v-if="orderDetail.appStu == 1"
            :timestamp="orderDetail.returnModifyTime"
            placement="top"
          >
            <el-card>
              <h4>退款成功</h4>
            </el-card>
          </el-timeline-item>
          <el-timeline-item
            v-if="orderDetail.appStu == 2"
            :timestamp="orderDetail.returnModifyTime"
            placement="top"
          >
            <el-card>
              <h4>退款审核拒绝,{{orderDetail.reason}}</h4>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>

      <div
        class="section-content"
        style="flex-direction: column;align-items: flex-start;"
        v-if="status == 10"
      >
        <div class="section-item">
          <div class="title">线下服务信息:</div>
          <div class="content">
            <span>{{orderDetail.receiver}}</span>
            <span>{{orderDetail.receiverMobile}}</span>
          </div>
        </div>
        <div class="section-item">
          <div class="title">选择服务店面:</div>
          <div class="content">
            <span>{{orderDetail.storeName}}</span>
            <span>{{orderDetail.storeAddress}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "3",
      orderDetail: {},
      deTime: "", //订单失效时间
      status: "", //订单状态
      tableData: [],
      transformList: [], //物流信息
    };
  },
  mounted() {
    let orderId = this.$route.query.orderId;
    this.status = this.$route.query.status;
    this.$service.getOrderDetailById({ orderId: orderId }).then(res => {
      console.log(res);
      this.orderDetail = res.data || {};
      this.tableData = res.data.orderdetailList;
      // this.tableData = [
      //   {
      //     productName: this.orderDetail.title || "-",
      //     ownSpec: this.orderDetail.ownSpec || "-",
      //     productNum: this.orderDetail.num || "-",
      //     indexs: this.orderDetail.indexs || "-",
      //     totalPay: Number(this.orderDetail.totalPay) / 100 || "-"
      //   }
      // ];
      let createTime = this.orderDetail.createTime;
      this.deTime = this.alignMin5(createTime, 15);

      let ordercode = this.orderDetail.orderNum || "";
      if (this.status != 1 || this.status != 2) {
        this.$service
          .getTransformList({ ordercode: ordercode })
          .then(transform => {
            console.log(transform);
            if (transform.code == "00000") {
              let listJsonStr = transform.data && transform.data.acceptStation;

              if (listJsonStr) {
                this.transformList = JSON.parse(listJsonStr);
              }
            }
          });
      }
    });
  },
  methods: {
    initData() {
      var param = {
        orderId: this.$route.query.orderId,
        moldType: this.activeName
      };
      this.$service.tAgentStreamQueryByOrderId(param).then(res => {
        if (res.code == "00000") {
          this.tableData =res.data
        }
      });
    },
    orderData() {
      let orderId = this.$route.query.orderId;
      this.$service.getOrderDetailById({ orderId: orderId }).then(res => {
        console.log(res);
        this.tableData = res.data.orderdetailList;
      });
    },
    //总的接口请求方法
    activeNameChange(e) {
      if(this.activeName =='3'){
        this.orderData();
      }else{
        this.initData();
      }
      
    },
    toDub: function(n) {
      return n < 10 ? "0" + n : n + "";
    },
    alignMin5: function(date, num, type) {
      var oDate = new Date(date);
      var min = oDate.getMinutes();
      oDate.setMinutes(min + num);
      var min = oDate.getMinutes();
      min = min < 10 ? "0" + min : min + "";

      return `${oDate.getFullYear()}-${this.toDub(
        oDate.getMonth() + 1
      )}-${this.toDub(oDate.getDate())} ${this.toDub(
        oDate.getHours()
      )}:${this.toDub(oDate.getMinutes())}:${this.toDub(oDate.getSeconds())}`;
    }
  }
};
</script>

<style lang="scss" scoped>
.section {
  width: 90%;
  margin: 0 auto 10px;
  display: flex;
  flex-direction: column;
  .section-title {
    height: 50px;
    font-weight: bold;
    display: flex;
    align-items: center;
  }
  .section-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    .section-item {
      flex: 1;
      margin: 10px 0;
      display: inline-flex;
      align-items: flex-start;
      .title {
        min-width: 100px;
        text-align: left;
        // margin-right: 20px;
      }
      .content {
        color: #888888;
      }
    }
  }
}
</style>